<template>
   <div>
    <el-form :inline="true" :model="query" label-width="130px" size="small">
       <!-- 孵化公司级别 -->
      <el-form-item label="孵化公司级别：" class="query-form-item">
        <!-- <el-select  v-model="query.promotioncategoryid" placeholder="请选择晋升类型" @change="onSubmit"  clearable>
          <el-option label="全部" value></el-option>
          <el-option v-for="item in dataList" :key="item.promotioncategoryid"  clearable 
          :label="item.categoryname" :value="item.promotioncategoryid"></el-option>
        </el-select>    -->
        <el-select v-model="query.companyLevel"  placeholder="请选择孵化公司级别" @change="onSubmit" clearable>
          <!-- <el-option label="全部" value></el-option> -->
          <el-option label="县级公司" value="4"></el-option>
          <el-option label="市级公司" value="3"></el-option>
          <el-option label="省级公司" value="2"></el-option>
          <el-option label="全球公司" value="1"></el-option>
        </el-select>
      </el-form-item>
    <!-- 申请状态 -->
      <el-form-item class="query-form-item" label="申请状态：">
        <el-select v-model="query.status"  placeholder="请选择申请状态" @change="onSubmit" clearable>
          <!-- <el-option label="全部" value></el-option> -->
          <el-option label="孵化中" value="2"></el-option>
          <el-option label="预备期结束" value="3"></el-option>
          <!-- <el-option label="孵化结束" value="3"></el-option> -->
        </el-select>
      </el-form-item>

      <!-- 是否申请组建公司 -->
      <el-form-item class="query-form-item" label="是否申请组建公司：" label-width="200px">
        <el-select v-model="query.isApplyCreatCompany" placeholder="请选择组建公司" @change="onSubmit" clearable>
          <!-- <el-option label="全部" value></el-option> -->
          <el-option label="否" value="0"></el-option>  
          <el-option label="是" value="1"></el-option>
        </el-select>
      </el-form-item>
      </el-form>
  <el-form :inline="true" :model="query" label-width="130px" size="small">
      <!-- 申请生成时间 -->
      <el-form-item>
          <el-date-picker
              v-model="createTime"
              unlink-panels
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="left"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00','23:59:59']"
              @change="dateChange"
          ></el-date-picker>
       </el-form-item>
      <!-- 申请商城账号查询 -->
      <el-form-item class="query-form-item">
            <el-input v-model="query.account" placeholder="申请商城账号" prefix-icon="el-icon-search"  @keyup.enter.native="onSubmit" clearable></el-input>
      </el-form-item>
      <!-- 查询框 -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-refresh" @click="onRest" size="small"></el-button>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit" size="small">查询</el-button>
        <el-button type="primary" icon="el-icon-add" @click="addForm" size="small">新增商城孵化申请</el-button>
      </el-form-item>
      </el-form >
      <!-- table表单 -->
      <el-table  ref="singleTable" :data="tableData" v-loading="loading"   style="width: 100%">
        <el-table-column label="序号" type="index" align="center" width="50">  </el-table-column>
        <el-table-column prop="status" align="center" label="申请状态" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1" style="color:#ffa659;">未申请</span>
            <span v-else-if="scope.row.status == 2" style="color:#4acf1e;">孵化中</span>
            <span v-else-if="scope.row.status == 3" style="color:#dc0101;">预备期结束 </span>
          </template>
        </el-table-column>
        <el-table-column prop="companyLevel" align="center" label="申请孵化公司级别"  width="180">
           <template slot-scope="scope">
            <span v-if="scope.row.companyLevel == 1" style="color:#ffa659;">全球品牌</span>
            <span v-else-if="scope.row.companyLevel ==2" style="color:#4acf1e;">省级</span>
            <span v-else-if="scope.row.companyLevel ==3" style="color:#4acf1e;">市级</span>
            <span v-else-if="scope.row.companyLevel ==4" style="color:#4acf1e;">县级</span>
          </template>
        </el-table-column>
        <el-table-column prop="account" align="center" label="申请商城账号" width="140"></el-table-column>
        <el-table-column prop="company" align="center" label="申请商城公司名称" ></el-table-column>
        <el-table-column prop="isApplyCreatCompany" align="center" label="是否申请组建公司" width="140"> 
            <template slot-scope="scope">
            <span v-if="scope.row.isApplyCreatCompany == 0" style="color:#ffa659;">否</span>
            <span v-else-if="scope.row.isApplyCreatCompany ==1" style="color:#4acf1e;">是</span>
          </template>
        </el-table-column>
        <el-table-column prop="createCompanyLevel"  align="center" label="申请组建公司级别" width="180">

          <template slot-scope="scope">
            
            <span v-if="scope.row.createCompanyLevel == 1" style="color:#ffa659;">全球品牌</span>
            <span v-else-if="scope.row.createCompanyLevel ==2" style="color:#4acf1e;">省级</span>
            <span v-else-if="scope.row.createCompanyLevel ==3" style="color:#4acf1e;">市级</span>
            <span v-else-if="scope.row.createCompanyLevel ==4" style="color:#4acf1e;">县级</span>
            <span v-else-if="scope.row.createCompanyLevel == null" style="color:#ffa659;">无</span>
          </template>
        </el-table-column>

        <el-table-column prop="applyTime" align="center" label="孵化申请时间" width="180">
         <template slot-scope="scope">
          <i class="el-icon-time" v-if="scope.row.applyTime!=null"></i>
          <span v-if="scope.row.applyTime!=null">{{ scope.row.applyTime | formatDateStr('yyyy-MM-dd ') }}</span>
          <span v-else>无</span>   
         </template>
        </el-table-column>

        <el-table-column  prop="endTime" align="center" label="孵化结束时间" width="180">
         <template slot-scope="scope">
          <i class="el-icon-time" v-if="scope.row.endTime!=null"></i>
          <span v-if="scope.row.endTime!=null">{{ scope.row.endTime | formatDateStr('yyyy-MM-dd ') }}</span>
          <span v-else>无</span>   
         </template>
        </el-table-column>
        <el-table-column  prop="preparatoryPeriod" align="center" label="孵化期时长" width="180" > 
          <template slot-scope="scope">
          <span v-if="scope.row.preparatoryPeriod !=null"> {{scope.row.preparatoryPeriod}}</span>
          <span v-else>无</span>
           </template>
        </el-table-column>

         <el-table-column  prop="companyIncorporationCertificate" align="center" label="操作" width="180" > 
          <template slot-scope="scope">
            
          <span v-if="scope.row.companyIncorporationCertificate !=null" > 
           
            <a :href="scope.row.companyIncorporationCertificate" download="下载公司组建凭证" target="_blank">
              <el-button type="primary"> 下载公司组建凭证</el-button>
            </a> 
          
          </span>
          <span v-else><el-button :disabled="true" type="info">下载公司组建凭证</el-button></span>
           </template>
        </el-table-column>

        </el-table>

        <el-pagination class="pagination-container"  background  :page-size="query.pageSize"
        @size-change="handleSizeChange" @current-change="handleCurrentChange"  layout="total,sizes,prev, pager, next, jumper"
        :current-page="this.query.currentPage"
        :page-sizes="[5,10, 20, 30, 50]"
        :total="totalNumber"></el-pagination>
    </div>
    
</template>
<script>
// import Vue from 'vue'
// Vue.directive('down', {
//     inserted: (el, binding) => {
//         el.style.cssText = 'cursor: pointer;color:red;'
//         el.addEventListener('click', () => {
//             console.log(binding.value)
//             let link = document.createElement('a')  // 创建a标签
//             link.style.display = 'none'
//             link.href =  binding.value // 设置下载地址
//             link.setAttribute('download', '') // 添加downLoad属性
//             document.body.appendChild(link)
//             link.click()
//         })
//     }
// })

//封装下载pdf的方法
//   Vue.directive('down', {
//   inserted: (el, binding) => {
//     el.style.cssText = 'cursor: pointer;color:write;'
//     el.addEventListener('click', () => {
//       console.log(binding.value)
//       let link = document.createElement('a')
//       let url =  binding.value
//       // 这里是将url转成blob地址，
//       fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
//         link.href = URL.createObjectURL(blob)
//         console.log(link.href)
//         link.download = ''
//         document.body.appendChild(link)
//         link.click()
//       })
//     })
//   }
// })
 
  import {getList } from "../../api/incubationrules/index.js";
  export default {
    data() {
      return {
        tableData: [],//列表集合
        createTime:[],//时间数组
        detailVisible:false,//新增弹窗
        pickerOptions: {
            //快速选择日期
            shortcuts: [
                {
                    text: "最近一周",
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(
                            start.getTime() - 3600 * 1000 * 24 * 7
                        );
                        picker.$emit("pick", [start, end]);
                    }
                },
                {
                    text: "最近一个月",
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(
                            start.getTime() - 3600 * 1000 * 24 * 30
                        );
                        picker.$emit("pick", [start, end]);
                    }
                },
                {
                    text: "最近三个月",
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(
                            start.getTime() - 3600 * 1000 * 24 * 90
                        );
                        picker.$emit("pick", [start, end]);
                    }
                },
                {
                    text: "最近六个月",
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(
                            start.getTime() - 3600 * 1000 * 24 * 180
                        );
                        picker.$emit("pick", [start, end]);
                    }
                }
            ]
        },
        query: {
          currentPage: 1,
          pageSize: 5 ,
          promotioncategoryid:'',
          companyLevel:"",//'1.全球品牌 2.省级 3.市级 4.县级''',
          status:"" ,//申请状态:1未申请，2.孵化中（申请中）3预备期结束
          isApplyCreatCompany:"", // 生效状态：0.否  1.是
          startDate:"",//开始时间
          endDate:"",//结束时间
          account:""
        },
        dataList :[],
        totalNumber: 0,
        loading: false,
        dataList:[],
        disabled:false,
        dialogTableVisible: false,
        dialogFormVisible: false,
        rejectData:[],
        reasons:"",
        formLabelWidth: '120px'
      }
    },
    methods: {
       /*日期选择事件*/
            dateChange(val) {
                if (val == null) {
                    this.query.startDate = "";
                    this.query.endDate = "";
                } else {
                    this.query.startDate = val[0];
                    this.query.endDate = val[1];
                    this.query.currentPage = 1;
                }
                this.getList();
                console.log(this.query);
            },

     
      // 列表数据获取
      getList(){
         this.loading = true;
        getList(this.query)
        .then(data=>{
            console.log(data) 
            if (data.code != 0) {
                this.$message.error(response.message);
                this.loading = false;
                return false;
            }
            this.tableData=data.data.list || []
            this.totalNumber = data.data.totalNumber || 0;
            // console.log(this.tableData)
            setTimeout(() => {
             this.loading = false;
            }, 0.3 * 1000);
          })
          .catch(err=>{
             this.loading = false;
              this.tableData =[]
          })
      },
      //下载文件
      // downloadFile(fileName, data) {
      //   if (!data) {
      //     return;
      //   }
      //   let url = window.URL.createObjectURL(new Blob([data]));
      //   let link = document.createElement('a');
      //   link.style.display = 'none';
      //   link.href = url;
      //   link.setAttribute('download', fileName);
      //   document.body.appendChild(link);
      //   link.click();
      // },

    
       // 隐藏详情弹框
      hideDetailForm() {
          // 更改值
          this.detailVisible = !this.detailVisible;
          // this.formData={};
          return true;
      },
      //新增信息跳转页面
      addForm(){
        this.$router.push({path:"addEntity"})
      },
      //刷新
      onRest() {
            this.$router.push({
                path: ""
            });
            this.createTime=[],
            this.query = {
                currentPage: 1,
                pageSize: 5 ,
                status:"" ,//申请状态:1未申请，2.孵化中（申请中）3预备期结束
                isApplyCreatCompany:"", // 生效状态：0.否  1.是
                startDate:"",//开始时间
                endDate:"",//结束时间
                account:"" 
            };
            
           this.getList()
        },
     


      //查询
      onSubmit() {
        this.query.currentPage = 1;
        this.getList()
        // console.log('submit!');
      }, 
      handleCurrentChange(val) {
            this.query.currentPage = val;
            //scrollTo(0, 800);
            this.getList()
        },
        handleSizeChange(val) {
            this.query.pageSize = val;
            this.getList()
        },
    },
   
    mounted(){
      
    },
   created(){
     this.getList()
   }

  }
</script>


